<template>
  <div class="iframe">
    <div class="i-title">
      <h3>watch 侦听</h3>
    </div>
    <div class="i-tip">
      <el-input type="text" v-model="str" />
    </div>
    <div class="i-tip">
      {{strTip}}
    </div>
    <div class="i-tip">
      {{strTip2}}
    </div>
  </div>
</template>

<script>
  import {
    ref,
    watch,
    reactive,
    onMounted
  } from 'vue'
  export default {
    name: "hello",
    setup() {
      let str = ref("...");
      let str2 = ref("...");
      let strTip = ref("...");
      let strTip2 = ref("...");
      let stu = reactive({
        name: "精英中学",
        grade: {
          name: "一年级",
          cls: {
            name: "3班",
            stuinfo: {
              name: "王小波",
              score: 60
            }
          }
        }
      })
      // onMounted(() => {
      //   // DOM 元素将在初始渲染后分配给 ref
      //    strTip2.value =stu.grade.cls.stuinfo.score;
      // })
      watch([str, str2], (newValue, oldValue) => {
        strTip.value = newValue;
      }, {
        immediate: true
      })
      watch(() => stu.grade.cls.stuinfo.score, (newValue, oldValue) => {
        strTip2.value = newValue;
      }, {
        immediate: true
      })
      setTimeout(() => {
        str.value = "今天是个好天气";
        str2.value = "明天可能会下雨";
      }, 2000)
      setTimeout(() => {
        str2.value = "后天又是大晴天";
      }, 5000)
      setTimeout(() => {
        stu.grade.cls.stuinfo.score = 100;
        str2.value = "恭喜，恭喜！";
      }, 8000)
      return {
        str,
        str2,
        strTip,
        strTip2
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
